<!DOCTYPE html>

<html lang="en">
	<head>
		<title>cSans 1.0 - Default styles</title>
		<meta charset="utf-8">
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com">

		<link rel="stylesheet" href="../csans/csans1.0.css" type="text/css">
		<link rel="stylesheet" href="../csans/flexible1.0.css" type="text/css">
		
		<style>
			.page {
				max-width: 1100px;
				min-width: 600px;
				padding: 0 20px;
			}
			article {
				background: #DDD;
			}
			article .comments {
				background: #FFF;
			}
			.page > div h1.image {
				background-image: url('http://treecitycanada.ca/wp-content/themes/rockingreen-leaf-10/images/header.jpg');
				height: 246px;
			}
		</style>
	</head>
	
	<body>
		<div class="page cols05">
			<div>
				<h1 class="image">Title in image</h1>
			</div>
			
			<header class="f33">
				<h1>This is the page title</h1>
				<h2>And this is the subtitle</h2>
				<p>Because I am cool</p>
			</header>
			
			<article class="f66">
				<nav>
					<ul class="tabs">
						<li><a href="#">This is an option</a></li>
						<li><a href="#">Another one</a></li>
						<li><a href="#">Ok, three options is fine</a></li>
					</ul>
				</nav>
				
				<header>
					<h1>This is the article title</h1>
					<h2>And the subtitle again</h2>
					<h3>Ok, the sub-subtitle</h3>
				</header>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at ipsum eros. Suspendisse potenti. Donec elementum, est sed iaculis sodales, turpis nisi aliquet tortor, at tempus velit enim id enim.</p>
				<p>Aenean porttitor est sit amet orci ultricies non semper sapien facilisis. Praesent nec mollis dolor. Nullam id odio sed justo cursus feugiat. Praesent fringilla tristique risus et hendrerit. Duis tincidunt, quam at imperdiet malesuada, odio felis consectetur purus, ac pellentesque sem lacus dapibus neque.</p>
				<figure class="left">
					<small>Rodchenko</small>
					<img width="400" src="http://herculezz.files.wordpress.com/2009/03/rodchenko.jpg" alt="Beautiful poster">
					<figcaption>This is a beautiful poster</figcaption>
				</figure>
				<p>Phasellus ut justo ut lacus feugiat sollicitudin vel<hr> lobortis nunc. Maecenas ornare, nulla in convallis consectetur, diam ante rutrum nisi, a condimentum nunc libero eget ante. Donec molestie sapien quis metus fermentum tempor.</p>
				
				<section class="comments f100 pv1">
					<h1 class="col">Notes</h1>
					<div class="col f50">
						This is a note
					</div>
					<div class="col f50">
						This is another note
					</div>
				</section>
			</article>
		</div>
	</body>
</html>